<!-- websocket -->
<template>
	<div class="page">
		<a-form
			:model="formState"
			name="basic"
			:label-col="{ span: 8 }"
			:wrapper-col="{ span: 16 }"
			autocomplete="off"
			@finish="onFinish"
			@finishFailed="onFinishFailed"
		>
			<a-form-item label="我的id" name="sendId" :rules="[{ required: false, message: 'Please input your username!' }]">
				<a-input v-model:value="formState.sendId" />
			</a-form-item>

			<a-form-item label="目标id" name="toId" :rules="[{ required: true, message: 'Please input your password!' }]">
				<a-input v-model:value="formState.toId" />
			</a-form-item>
			<a-form-item
				label="是否群发"
				name="isGroup"
				:rules="[{ required: true, message: 'Please input your password!' }]"
			>
				<a-input v-model:value="formState.isGroup" />
			</a-form-item>
			<a-form-item
				label="消息内容"
				name="message"
				:rules="[{ required: true, message: 'Please input your password!' }]"
			>
				<a-input v-model:value="formState.message" />
			</a-form-item>

			<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
				<a-button type="primary" html-type="submit">Submit</a-button>
			</a-form-item>
		</a-form>
	</div>
</template>

<script setup name="websocketComponent">
	import { Socket } from './utils/index'
	import tool from '@/utils/tool'

	const options = {
		url: 'ws://localhost:82/websocket/' + tool.data.get('TOKEN'),
		isHeart: false,
		openCb: function () {
			console.log('连接了')
		},
		closeCb: function () {
			console.log('关闭了')
		},
		messageCb: function (event) {
			console.log('收到消息了', event)
		},
		errorCb: function () {
			console.log('出错了')
		}
	} //websocket的配置

	const formState = ref({
		sendId: '',
		toId: '',
		isGroup: 0,
		message: ''
	}) //表单数据

	let websocket = null //websocket实例

	onMounted(() => {
		websocket = new Socket(options)
	})

	const onFinish = (values) => {
		console.log('Success:', values)
		websocket.send(JSON.stringify(values))
	}

	const onFinishFailed = (errorInfo) => {
		console.log('Failed:', errorInfo)
	}

	// const openSocket = () => {
	// 	//打开事件
	// 	socket.onopen = function () {
	// 		console.log('websocket已打开')
	// 	}
	// 	//发生了错误事件
	// 	socket.onerror = function () {
	// 		console.log('websocket发生了错误')
	// 	}
	// }
	// const sendMessage = () => {
	// 	socket.send('{"toUserId":"' + $('#toUserId').val() + '","contentText":"' + $('#contentText').val() + '"}')
	// 	console.log('{"toUserId":"' + $('#toUserId').val() + '","contentText":"' + $('#contentText').val() + '"}')
	// }
</script>

<style lang="less" scoped></style>
